// const { set } = require("vue/types/umd");

(function (window) {
	'use strict';
	let filters = {
		all(todos){
			return todos;
		},
		active(todos){
			return todos.filter(todo => !todo.completed)
		},
		completed(todos){
			return todos.filter(todo => todo.completed)
		}
	}
	// Your starting point. Enjoy the ride!
	const TODOS_KEY = 'todos_vue';
	let todoStorage = {
		get(){
			return JSON.parse(localStorage.getItem(TODOS_KEY));
		},
		set(todos){
			localStorage.setItem(TODOS_KEY, JSON.stringify(todos));
		}
	};
	new Vue({
		el: '#app',
		data:{
			// todos: [
			// 	{ id: 1, title: '示例内容1', completed: false},
			// 	{ id: 2, title: '示例内容2', completed: false},
			// 	{ id: 3, title: '示例内容3', completed: true}
			// ],
			todos: todoStorage.get(),
			newTodo: '',
			editingTodo: null,
			titleBeforeEdit: '',
			todoType: 'all'
		},
		watch: {
			todos:{
				deep: true,
				handler:todoStorage.set
			}
		},
		computed:{
			// 根据过滤条件展示内容
			filteredTodo(){
				return filters[this.todoType](this.todos);
			},
			// 获取代办事项个数
			remaining(){
				return filters.active(this.todos).length;
			},
			// 切换选框状态
			allDone: {
				get(){
					return this.remaining === 0;
				},
				set(value){
					this.todos.forEach(todo => {
						todo.completed = value;
					})
				}
			}
		},
		methods:{
			// 处理单位
			pluralize(word){
				return word + (this.remaining === 1 ? '' : 's')
			},
			// 新增事项
			addTodo(){
				var value = this.newTodo.trim();
				if(!value) return;
				this.todos.push({id: this.todos.length + 1, title: value, completed: false})
				this.newTodo = '';
			},
			// 移除事项
			removeTodo(todo){
				var index = this.todos.indexOf(todo);
				this.todos.splice(index, 1);
			},
			// 移除已完成
			removeCompleted(){
				this.todos = filters.active(this.todos);
			},
			// 编辑事项
			editTodo(todo){
				this.editingTodo = todo;
				this.titleBeforeEdit = todo.title;
			},
			// 取消编辑
			cancleEdit(todo){
				this.editingTodo = null;
				todo.title = this.titleBeforeEdit;
			},
			// 保存编辑
			editDone(todo){
				if (!this.editingTodo) return;
				this.editingTodo = null;
				todo.title = todo.title.trim();
				if (!todo.title) {
					this.removeTodo(todo);
				}
			}
		},
		directives:{
			// 设置正在编辑的事项输入框获取焦点
			'todo-focus'(el, binding){
				if(binding.value){
					el.focus();
				}
			}
		}
	})

})(window);
